<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>领取</title>
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/bootstrap-4.2.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath }/user/SUI_Mobile/sm.min.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath }/user/SUI_Mobile/sm-extend.min.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/user/css/common.css">
  <style type="text/css">
    .mainContent{
      height: 100%;
      padding: 3px;
      border: 0px solid #0f0;
      /*设置滚动条*/
      overflow-x: hidden;
      overflow-y: scroll;
      /*解决ios上滑动不流畅*/
      -webkit-overflow-scrolling: touch;
      /*纵向超出部分将会隐藏，即滚动条部分被挤出可视区域*/
    }
      /*设置滚动条，谷歌内核webkit*/
    .container ::-webkit-scrollbar {
        display: none;
    }
    /*设置滚动条，IE或者Firefox*/
    .container {
        -ms-overflow-style: none; /*IE 10+*/
        overflow: -moz-scrollbars-none; /*Firefox*/
    }
    .label{
      width: 140px;
    }    
    .list-block{
      padding: 5px 0px;
    }
    ul{
      padding: 2px 0px;
    }
    ul li{
      padding-top: 10px;
    }
    ul::before,ul::after{
      border: 1px solid #fff;
    }
    .issueBtn:hover{
      background-color: #fff;
    }
  </style>
</head>
<body>
  <div class="container">
    <header class="bar bar-nav header">
      <a class="button button-link button-nav pull-left back" href="#" onclick="history.go(-1)">
        <span class="icon icon-left"></span>返回
      </a>
      <h1 class='title'>详情</h1>
      <a class="button button-round pull-right confirmTakenBtn">确定</a>
    </header>
    <!-- 中间，记录显示 -->
    <div class="mainContent">
      <form class="list-block" style="margin-top:20px;">
        <input type="text" class="aid" value="${article.aid}" style="display:none;">
        <input type="text" class="uid" value="${user.uid}" style="display:none;">
        <ul>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="label">标题</div>
                <div class="item-input">
                  <input type="text" value="${article.title}">
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="label">失物类别</div>
                <div class="item-input">
                  <input type="text" value="${article.cname }">
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="label">发布类型</div>
                <div class="item-input">
                  <c:choose>
                    <c:when test="${article.whatFlag == 0 }"><input type="text" value="寻找失主"></c:when>
                    <c:when test="${article.whatFlag == 1 }"><input type="text" value="寻找失物"></c:when>
                  </c:choose>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="label">细节</div>
                <div class="item-input">
                  <textarea>${article.detailInfo }</textarea>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="label">照片</div>
                <div class="item-input">
                  <img src="${pageContext.request.contextPath }/images${article.image}" style="width: 360px;height: 210px;">
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner" style="border-bottom: 0.5px solid #E7E7E7;margin-bottom: 5px;">
                <div class="label">是否领取</div>
                <div class="item-input">
                  <!-- <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="forConfirmTaken" id="confirmTaken" value="0">
                    <label class="form-check-label" for="confirmTaken">确定领取</label>
                  </div>
                  <div class="form-check form-check-inline" style="padding: 0 10px 0 3px;">
                    <input class="form-check-input" type="radio" name="forConfirmTaken" id="cancelTaken" value="1" checked>
                    <label class="form-check-label" for="cancelTaken">取消领取</label>
                  </div> -->
                  <div class="custom-control custom-radio custom-control-inline">
                    <input type="radio" id="confirmTaken" name="forConfirmTaken" class="custom-control-input" value="0">
                    <label class="custom-control-label" for="confirmTaken" style="padding-top:4px;">确定领取</label>
                  </div>
                  <div class="custom-control custom-radio custom-control-inline">
                    <input type="radio" id="cancelTaken" name="forConfirmTaken" class="custom-control-input" value="1" checked>
                    <label class="custom-control-label" for="cancelTaken" style="padding-top:4px;">取消领取</label>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="label">领取情况</div>
                <div class="item-input">
                  <textarea class="foundInfo" placeholder="请填写领取人的姓名，联系方式，班级等信息"></textarea>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </form>
    </div><!-- end of .mainContent -->
  </div> <!-- end of .container -->

  <script type='text/javascript' src='${pageContext.request.contextPath }/user/SUI_Mobile/zepto.min.js' charset='utf-8'></script>
  <script type='text/javascript' src='${pageContext.request.contextPath }/user/SUI_Mobile/sm-extend.min.js' charset='utf-8'></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.3.1.min.js" charset="utf-8"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/bootstrap-4.2.1/js/bootstrap.min.js" charset="utf-8"></script>
  <script>
    $(function(){
    	$('.confirmTakenBtn').on('click', function(){
    		var taken = $('input:radio[name="forConfirmTaken"]:checked').val();
    		var aid = $('.aid').val();
    		var uid = $('.uid').val();
    		if(taken == "1"){
    			// 取消认领
    			var takenFlag = confirm("取消认领？")
    			if(takenFlag){
    				$.post(
    				  "/LostAndFound/message?method=cancelOrderArticle",
    				  {
    					  "aid":aid
    				  },
    				  function(data){
    					  if(data.success){
    						  window.location.href="/LostAndFound/message?method=getInfoList&uid="+uid
    					  }
    				  },
    				  "json"
    				);
    			}
    		} else {
    			// 确定认领
    			var takenFlag = confirm("确定认领？")
    			if(takenFlag){
	    			var foundInfo = $('.foundInfo').val();
	    			if(foundInfo==""||foundInfo==null){
	    				$('.foundInfo').focus();
	    			}else{
	    				console.log('confirm..')
	    				$.post(
	    				  "/LostAndFound/message?method=confirmOrderArticle",
	    				  {
	    					  "aid":aid,
	    					  "foundInfo":foundInfo
	    				  },
	    				  function(data){
	    		        if(data.success){
	    		          window.location.href="/LostAndFound/message?method=getInfoList&uid="+uid
	    		        }
	    				  },
	    				  "json"
	    				);	    				
	    			}
    			} // end second if{}
    		} // end of first big else{}
    	}) // end of .confirmTakenBtn click
    })
  </script>
</body>
</html>